<template>
  <div class="protection">
    <div class="account">
      <div class="account_title">维权信息告示牌</div>
    </div>
    <div class="ultitle flexAround">
      <div>公示牌照片</div>
      <div>相关信息</div>
    </div>
    <a-modal
      v-if="visible"
      v-model="visible"
      title
      @ok="handleOk"
      :footer="null"
      :centered="true"
      :closable="false"
    >
      <div style="width:100%;height:100%">
        <img :src="imgUrl" width="100%" height="100%" alt />
      </div>
    </a-modal>
    <div>
      <ul>
        <li v-for="(item,index) in imgData" :key="index">
          <div class="flexStart">
            <div class="li-img">
              <a-carousel arrows autoplay style="width:229px;">
                <div slot="prevArrow" class="custom-slick-arrow" style="left: 10px;zIndex: 1">
                  <a-icon type="left-circle" />
                </div>
                <div slot="nextArrow" class="custom-slick-arrow" style="right: 10px">
                  <a-icon type="right-circle" />
                </div>
                <!-- <div v-for="(file,index) in item.fileList" :key="index">
                <h3>-->
                <!-- <img
                      :src="file.fileUrl"
                      width="100%"
                      height="100%"
                      alt
                      @click="showAmodel(file.fileUrl)"
                />-->

                <!-- <div
                        v-for="(file,index) in item.fileList" :key="index"
                >-->
                <!-- <div> -->
                  <viewer
                    :images="item.fileList"
                    style="width:100%;min-height:130px"
                    v-for="(file,index) in item.fileList"
                    :key="index"
                  >
                    <!-- <h3> -->
                    <img :src="file.fileUrl" width="100%" height="130" />
                    <!-- </h3> -->
                    <!-- </div> -->
                  </viewer>
                  <!-- </div> -->
                  <!-- </h3> -->
                <!-- </div> -->
              </a-carousel>
            </div>
            <div class="flexStart1">
              <div class="flexStart2 li-content">
                <div style="margin-right:30px">设立位置：{{item.place}}</div>
                <div>最新更新时间：{{moment(item.updateTime).format('YYYY-MM-DD')}}</div>
                <div>负责人：{{item.manager}}</div>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import lb1 from '@/assets/homeImg/wqgsp6.png'
import lb2 from '@/assets/homeImg/wqgsp4.png'
import lb3 from '@/assets/homeImg/wqgsp4.png'
import lb4 from '@/assets/homeImg/wqgsp6.png'
import { rightProtectionBoardQuery } from '@/api/rightProtectionBoard.js'
import { mapGetters } from 'vuex'
import moment from 'moment'
export default {
  data() {
    return {
      visible: false,
      imgUrl: '',
      lb1,
      lb2,
      lb3,
      lb4,
      imgData: []
    }
  },
  mounted() {
    this.getProtection()
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  methods: {
    moment,
    getProtection() {
      let data1 = {}
      data1.likeName = ''
      data1.page = 0
      data1.size = 0
      data1.orgId = sessionStorage.getItem('gatewayId')
      rightProtectionBoardQuery(data1).then((res) => {
        let tabdata = res.data.data
        this.imgData = []
        tabdata.forEach((item, index) => {
          item.key = item.id
          item.releaseDate = moment(item.releaseDate).format('YYYY-MM-DD')
          item.updateTime = moment(item.updateTime).format('YYYY-MM-DD')
          item['description'] = {}
          item['description']['data'] = item.fileList
          item['description']['people'] = item.updateId
          item['description']['updateTime'] = item.updateTime
        })
        this.imgData = tabdata
      })
    },
    handleOk(e) {
      //   console.log(e);
      this.visible = false
    },
    showAmodel(img) {
      // console.log(img);
      this.imgUrl = img
      // switch (img) {
      //   case 1:
      //     this.imgUrl = this.lb1
      //     break
      //   case 2:
      //     this.imgUrl = this.lb2

      //     break
      //   case 3:
      //     this.imgUrl = this.lb3
      //     break
      //   default:
      //     this.imgUrl = this.lb4

      //     break
      // }

      this.visible = true
      // console.log(this.imgUrl);
    }
  }
}
</script>

<style scoped>
.title {
  color: #1890ff;
  font-size: 16px;
  margin-bottom: 10px;
}
.ultitle {
  width: 1200px;
  height: 50px;
  background: #fafafa;
  line-height: 50px;
  color: #000000d8;
  font-size: 15px;
  text-align: center;
}
.ultitle :nth-child(1) {
  width: 230px;
}
.ultitle :nth-child(2) {
  width: 900px;
}
li {
  list-style: none;
  padding: 15px 0;
  color: #333;
  border-bottom: 1px solid #ccc;
}
li:last-of-type {
  border-bottom: none;
}
.li-img {
  margin-right: 70px;
}
.li-content {
  line-height: 50px;
  /* vertical-align: middle; */
}
.li-content :nth-child(1) {
  width: 300px;
}
.li-content :nth-child(2) {
  width: 500px;
}
.li-content :nth-child(3) {
  width: 300px;
}
.account {
  height: 45px;
  /* border-bottom: 1px solid #ccc; */
  margin-bottom: 30px;
}
.account_title {
  width: 130px;
  height: 45px;
  font-size: 16px;
  line-height: 45px;
  color: #1890ff;
  border-bottom: 2px solid #1890ff;
  text-align: center;
  margin-left: 30px;
}
.ant-carousel >>> .slick-slide {
  text-align: center;
  height: 130px;
  line-height: 130px;
  /* background: #364d79; */
  overflow: hidden;
}

.ant-carousel >>> .custom-slick-arrow {
  width: 25px;
  height: 25px;
  font-size: 25px;
  color: #fff;
  background-color: rgba(31, 45, 61, 0.11);
  opacity: 0.3;
}
.ant-carousel >>> .custom-slick-arrow:before {
  display: none;
}
.ant-carousel >>> .custom-slick-arrow:hover {
  opacity: 0.5;
}

.ant-carousel >>> .slick-slide h3 {
  color: #fff;
}
::v-deep .ant-modal {
  width: 1000px !important;
  top: 10px;
}
::v-deep .ant-modal-body {
  padding: 0 !important;
  height: 500px;
}
.flexStart2 {
  align-items: flex-start;
}
</style>
